<template>
  <div>
    <c-title :hide="false" text="AI线索"></c-title>
    <div class="flex-col page">
      <div class="flex-col justify-start flex-1 group_3">
        <div class="flex-col list">
          <div @click="toAichatHistory(item.uid)" class="flex-row relative list-item mt-15" v-for="(item, index) in list" :key="index">
            <div class="flex-row items-center shrink-0 self-start group_5">
              <img class="image_5" :src="item.avatar" />
              <div class="ml-8 flex-col items-start">
                <span class="font_2">{{ item.nickname }}</span>
                <span class="mt-8 font_3">{{ item.mobile }}</span>
                <span v-if="item.last_time != null" class="font_4 mt-11">最后聊天时间：{{ item.last_time }}</span>
              </div>
            </div>
            <div class="flex-col items-end flex-1 self-center group_4">
              <div v-if="item.yx_status > 0" class="flex-col justify-start items-center text-wrapper button"><span class="font">意向</span></div>
              <div @click.stop="toTeam(item.uid)" v-if="level_weight > 1" class="flex-col justify-start items-center text-wrapper button mt-10"><span class="font">下级</span></div>
            </div>
            <img class="shrink-0 self-start image_6 image_7" src="https://shops.cg500.com/static/yunchuang_aixiansuo_arrowright.png" />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import AiclueController from "./AiclueController";

export default AiclueController;
</script>

<style>
body {
  background-color: #f0f3fd;
}
</style>
<style lang="scss" rel="stylesheet/scss" scoped>
@import "../common/common.css";
.mt-11 {
  margin-top: 11px;
}
.mt-15 {
  margin-top: 15px;
}
.page {
  width: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  height: 100%;
}
.group_3 {
  padding-bottom: 180px;
  margin-top: 10px;
  overflow-y: auto;
}
.list {
  margin: 0 15px;
}
.list-item {
  padding: 13px 10px 18px 12px;
  background-color: #ffffff;
  box-shadow: 0px 0px 9px #888ef30a;
  border-radius: 10px;
}
.list-item:first-child {
  margin-top: 0;
}
.group_5 {
  margin-top: 6px;
}
.image_5 {
  width: 40px;
  height: 40px;
  border-radius: 50%;
}
.font_2 {
  font-size: 14px;
  font-family: PingFang SC;
  line-height: 13px;
  color: #1c1c43;
  width: 195px;
  text-align: left;
}
.font_3 {
  font-size: 14px;
  font-family: PingFang SC;
  line-height: 11px;
  color: #1c1c43;
}
.group_4 {
  margin-left: 27px;
}
.text-wrapper {
  margin-right: 3px;
}
.button {
  padding: 4px 0;
  background-image: linear-gradient(90deg, #9e8df7 0%, #757ef8 100%);
  border-radius: 10px;
  width: 36px;
}
.font {
  font-size: 11px;
  font-family: PingFang SC;
  line-height: 11px;
  color: #ffffff;
}
.font_4 {
  font-size: 11px;
  font-family: PingFang SC;
  line-height: 11px;
  color: #999999;
}
.image_6 {
  width: 5px;
  height: 8px;
}
.image_7 {
  margin-left: 14px;
  margin-top: 23px;
}
.mt-10 {
  margin-top: 5px;
}
</style>